<template>
  <Header></Header>
  <div id="appCapsule">
    <div class="section mt-2" v-for="article in articles" :key="article['aid']" data-bs-target="#ModalBasic" data-bs-toggle="modal" @click="goDetail(article['aid'])">
      <div class="card">
        <img :src="article['headpic']" alt="" class="card-img-top">
        <div class="card-body">
          <div class="card-title">{{article.title}}</div>
          <div class="card-text" v-html="article.abstract"></div>
        </div>
      </div>
  </div>
  </div>
  <Footermenu></Footermenu>

<!--  文章的Modal-->
  <div class="modal fade modalbox" id="ModalBasic" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">文章详情</h5>
                        <a href="#" data-bs-dismiss="modal">关闭</a>
                    </div>
                    <div class="modal-body" v-html="modal.body">

                    </div>
                    <div class="modal-footer">
                      本文来源: <a :href="modal.source_href">查看源地址</a>
                      <p><a :href="modal.source">源主页</a></p>
                    </div>
                </div>
            </div>
        </div>
</template>

<script setup>

import Footermenu from "../components/Footermenu.vue";
import Header from "../components/Header.vue";
import {onMounted, reactive} from "vue";
import axios from '../utils/axios-plugin.js'
import {useRouter} from "vue-router";
const articles = reactive([])
const modal = reactive({
  title:'',
  body:'',
  source:'',
  source_href:'',
  headpic:''
})

const router = useRouter()
onMounted(() =>{
  axios.post('/article/articleList')
      .then(res=>{
        articles.push(...res)
      })
})

function goDetail(id){
    axios.post('/article/'+id)
      .then(res=>{
        modal.title = res.title
        modal.body = "<img style='width: 100%;margin: 1rem 0' alt='' src='"+res.headpic+"'"+">" + res.body
        modal.headpic = res.headpic
        modal.source = res.source
        modal.source_href = res.source_href
      })
}

</script>

<style lang="scss" scoped>
.modal-body > p{
  font-size: 18px;
  word-wrap: break-word;
  hyphens: auto;
  text-align: justify;
}
</style>